<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>arc</title>
        <script type="text/javascript" src="http://localhost:9000/public/js/lib/d3.min.js" ></script>
        <style>
            .svg{
                box-shadow:0 0 10px rgba(0,0,0,.3);
            }
            .arc{
                fill:#000;
                stroke:#999;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" >
            (function(w){
                var width = 500 ;
                var height = 500 ;
                var svg = d3.select('body').append('svg').attr({
                        class : "svg" ,
                        width : width ,
                        height : height
                    }) ;
                var data = [10,3,40,22,5,20] ;
                var getPai = function(angle){
                    return Math.PI/180*angle;
                } ;
                var pie = d3.layout.pie().padAngle(.02) ;
                var arc = d3.svg.arc().innerRadius(width/8).outerRadius(width/4);
                var g = svg.append('g').attr({
                    transform : "translate(" + width/2 + "," + height/2 +  ")"
                }) ;
                var path = g.selectAll('path').data(pie(data)).enter().append('path').attr({
                    class : 'arc' ,
                    d :arc
                }).on('mouseover',function(){
                    d3.select(this).transition().delay(100).attr({
                        "d" : arc.outerRadius(width/3)
                    }) ;
                }).on('mouseout',function(){
                    d3.select(this).transition().delay(100).attr({
                        "d" : arc.outerRadius(width/4)
                    }) ;
                });

            }(window)) ;
        </script>
    </body>
</html>